我的資料結構

.
├── App.js   // App root component，the start of JS code
├── android/  // Android native project
├── app.json  // React Native app config
├── index.js  // App entry point
├── ios/  // iOS native project
├── assets/  // Icon、Image
├── node_modules/  // npm packages
├── package.json  // npm dependencies
├── src/  // all of JS code
├── prettierrc.js  // setting code format
└── yarn.lock // yarn dependencies

src 裡會有以下 folder

- components/：放置單純的 props 元件
- common/：放會共用的元件
- constants/：放置自行定義的 style 及 mock request
- redux/：放所有的 Action Creators、Reducers
- services/：放重複讀取的 Server API
- utils/：放共用的 functions

運作的邏輯

在啟用 APP 時， native project（ios 跟 android） 會調用 React Native 去獲得 Root Component，而 default 就是指向 index.js 。

index.js：

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry 是所有 React Native 為 JS 入口。在 Root Component 使用 AppRegistry.registerComponent 的方法來注册，然后 native 才能進行加載且在啟動完成後通過 AppRegistry.runApplication 来調用進行運作。

App.js

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Color
  LearnMoreLinks,
} from 'react-native/Libraries/NewAppScreen';
import Haha from '@components/Haha';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <LearnMoreLinks />
        </View>
        <Haha />
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  highlight: {
    fontWeight: '700',
  },
});

export default App;

因為 AppRegistry.registerComponent 指向 App.js，所以 App.js 就成為了 Root Component，之後可以在這個App裡面加入你的JS Component，慢慢擴展你的App。

這次專案中我會全都使用 functional component，在 component 裡面有個 render() 此方法為渲染，他會回傳裡面的的標籤相似於 HTML，我們稱作 JSX (Javascript XML)。

解決Import超多”../“的問題

在 node.js 需要使用 import 來引入另一個檔案，而寫的是 relative path 如下：

如果在 App.js 引入
import PanelInfo from './src/components/Panel/PanelInfo';

解決辦法 - 使用 Alias

介紹插件babel-plugin-module-resolver - 可用 npm or yarn

npm install babel-plugin-module-resolver

於跟目錄建立 .babelrc 檔案寫入 alias，藉由套件 set up aliasing，如下

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [".js",".jsx",".ios.js", ".android.js"],
        "alias": {
          "@src": "./src"
        }
      }
    ]
  ]
}

root: 指定路徑或根目錄
alias: 設定命名及對應的位置
extensions: 解析中使用的擴展數組，也就是覆蓋默認的擴展名

接著下以下指令

npm start --reset-cache  // 清除 npm cache

npm run ios // 重新 build

所有檔案都可以這樣使用：

你也可以把所有folder都命名一遍，例如：
import PanelInfo from '@src/components/Panel/PanelInfo';

會在前面加上'@'是因為避免 npm packages 撞名，例如'@component'

DAY4 done 歡迎指教 ❤️